<template>
	<view>
		<view class="nav">
			<uni-nav-bar @clickLeft="$tab.back()" fixed="false" color="#fff" left-icon="left" backgroundColor="#FE6B39"
				title="商品管理" statusBar="true" :border="false" />
			<view class="top-box">
				<view class="box">
					<u--input placeholder="搜索您的商品名称" border="surround" v-model="searchName"></u--input>
					<u-button text="搜索" @click="refresh"></u-button>
				</view>
			</view>
		</view>

		<view :style="{
			height:occupyHeiht + 'px'
		}">

		</view>

		<view class="bg-FFF">
			<u-tabs :list="tabsList" :current="tabIndex" :scrollable="false" lineWidth="30" lineColor="#DF2E2C"
				:activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" @change="tabChange">
			</u-tabs>
		</view>

		<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
			<view class="p-20 bg-FFF mt-24" v-for="(item,index) in list" :key="index">
				<view class="flex py-20">
					<image class="image-144" :src="globalConfig.imagePrefix + item.cover" mode=""></image>
					<view class="ml-24 flex flex-col justify-between">
						<view class="u-line-2">
							{{item.name}}
						</view>
						<view class="text-gray">
							<text class="">价格：<text class="sprice">{{item.price}}</text></text>
						</view>
					</view>
				</view>
				<view v-if="item.verifyRemark && item.verifyState != 0">
					<view style="display: inline-block;">
						<u-tag text="审核失败" type="error" style="width: 100%;"></u-tag>
					</view>
					<view class="mt-20">
						备注：{{item.verifyRemark}}
					</view>
				</view>
				<u-divider></u-divider>
				<view class="flex justify-between items-center">
					<view class="flex items-center" @click="onchange('编辑',item.id)">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/preImages/business/bianji2.png"
							mode="" class="image-40">
						</image>
						<text class="ml-16">编辑</text>
					</view>
					<view class="flex items-center" @click="onchange('下架',item.id)" v-if="tabIndex==1">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/preImages/business/xiajia2.png"
							mode="" class="image-40">
						</image>
						<text class="ml-16">下架</text>
					</view>
					<view class="flex items-center" @click="onchange('上架',item.id)" v-if="tabIndex==2">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/preImages/business/xiajia2.png"
							mode="" class="image-40"></image>
						<text class="ml-16">上架</text>
					</view>
				</view>
			</view>
		</s-pull-scroll>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [{
						name: '审核中'
					},
					{
						name: '已上架'
					},
					{
						name: '已下架'
					},
					{
						name: "审核失败"
					}
				],
				tabIndex: 0, // tabs组件的current值，表示当前活动的tab选项
				searchName: '',
				occupyHeiht: 0,
				list: [],
				globalConfig: getApp().globalData.config
			}
		},
		onShow(e) {
			this.refresh()
		},
		onReady() {
			let view = uni.createSelectorQuery().in(this).select(".nav");
			view.fields({
				size: true,
				scrollOffset: true
			}, data => {
				this.occupyHeiht = data.height
			}).exec();
		},
		methods: {
			onchange(name, product) {
				switch (name) {
					case '重新编辑':
					case '编辑':
						this.$tab.nav(`/pages/mine/store/publish?product=${product}`)
						break
					case '上架':
						this.$Api.store.mallSpuvalid({
							id: product,
							state: 1
						}).then(res => {
							this.refresh();
						})
						break
					case '下架':
						this.$Api.store.mallSpuvalid({
							id: product,
							state: 0
						}).then(res => {
							this.refresh();
						})
						break
				}
			},
			tabChange(e) {
				this.tabIndex = e.index
				this.refresh()
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}

					const res = await this.$Api.store.appstoresList({
						pageNum: pullScroll.page,
						pageSize: 10,
						appSpuState: this.tabIndex,
						name: this.searchName,
					})

					this.list = this.list.concat(res.rows || []);

					if (res.total == 0) {
						pullScroll.empty()
					}

					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.top-box {
		padding: 32rpx 20rpx;
		background-color: #FE6B39;

		.box {
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 222rpx;

			.u-input {
				border: none !important;
			}

			.u-button {
				width: 120rpx;
				height: 56rpx;
				margin-right: 10rpx;
				border-radius: 184rpx;
				color: #fff;
				background-color: #FE6B39;
			}
		}
	}

	.nav {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		width: 100%;
	}
</style>